<!--
优先级
    一个元素有多个选择器时，就会出现优先级问题。

    选择器相同
        按照层叠性执行
    选择器不同
        按照权重执行

    ----------------------------------
    继承、或者*           0,0,0,0
    标签选择器            0,0,0,1
    类选择器、伪类选择器   0,0,1,0
    ID选择器              0,1,0,0
    行内样式              1,0,0,0
    !important           无穷大
    ----------------------------------

注意
    1）权重由4组数字组成，不会进位
        0,0,0,0  --》  0,11,10,101（只在各组中增加，不会越组进位）
    可以理解为不同维度的比较，例如：类选择器永远大于标签选择器，如下
        0,0,2,0  永远大于  0,0,0,999

    2）比较顺序
        从左往右依次比较，若相同，就下一组数字继续，若4组都相同，则按照层叠性执行

    3）简化为如下记忆
        !important > 行内 > ID > 类、伪类 > 标签 > 继承、*
            ∞        1000   100    10        1      0
    注意，不会进位！！！

    4）基本（单个）选择器继承来的权重是0
        .nav    父：10，自己：0
        ul      父：1，自己：0
    元素自身权重永远比父元素权重大
    自己有，就以自己为准，自己没有，才会考虑父亲
        自己    div{}       1
        父亲    !important  无穷大
    最后自己真正权重：自己的1 + 继承来的0 = 1
    
    5）组合（多个）选择器的继承不是0
        .nav li     父：10，自己：10+1
        ul li       父：1，自己：1+1
    参考【权重继承】
-->
<style>
    /* 权重：100 */
    #myself {
        color: green;
    }
    /* 权重：1+无穷大 */
    div {
        color: red!important;
    }
    /* 权重：10 */
    .test {
        color: orange;
    }
    /* 继承权重问题 */
    /* 父元素权重：100+无穷大，但继承给子元素的权重是：0 */
    #myul {
        color: yellow!important;
    }
    /* 自己权重：10 */
    .myli {
        color: cyan;
    }
</style>

<div class="test" id="myself">hello world</div>

<ul id="myul">
    <li class="myli">hello</li>
</ul>